<template>
  <div class="machining">
    
    <el-row :gutter="10">
      <el-col :span="6" :offset="3">
        <el-button type="primary" plain @click="dialogAddBucket = true,getBucket()">点击签收奶桶</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogBuckerOperate = true,getBuckes()">添加奶桶操作</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogSentMilk = true,getBuckes(),loading = false">点击发送奶桶</el-button>
      </el-col>
    </el-row>
    

    <el-dialog
            title="签收奶桶"
            :visible.sync="dialogAddBucket"
            width="50%">

      <el-form
              status-icon
              :model="confirmBucket"
              ref="ruleForm2"
              class="demo-ruleForm">

        <el-form-item label="奶桶编号">
          <el-select v-model="confirmBucket.buckerId" placeholder="请选择奶桶编号">
            <el-option
                    v-for="(item) in bucketIds"
                    :key="item.id"
                    :label="item.id"
                    :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否签收">
          <el-radio-group v-model="confirmBucket.isConfirm">
            <el-radio label="1">签收</el-radio>
            <el-radio label="2">拒签</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddBucket = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addBucket()">确 定</el-button>
      </span>

    </el-dialog>


    <el-dialog
            title="添加奶桶操作"
            :visible.sync="dialogBuckerOperate"
            width="50%">

      <el-form
              status-icon
              :model="bucketOperate"
              ref="ruleForm2"
              class="demo-ruleForm">


        <el-form-item label="奶桶编号">
          <el-select v-model="bucketOperate.bucketId" placeholder="请选择奶桶编号">
            <el-option
                    v-for="(item) in bucketIds2"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作种类">
          <el-radio-group v-model="bucketOperate.operation">
            <el-radio :label="1">灌装</el-radio>
            <el-radio :label="2">消毒</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-input 
          v-model="bucketOperate.consumptionOrOutput" 
          placeholder="消耗或产出" 
          :disabled="bucketOperate.operation === 1"></el-input>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBuckerOperate = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addBucketOperate()">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
            title="物流信息"
            :visible.sync="dialogSentMilk"
            width="50%">

      <el-form
              status-icon
              :model="cow"
              ref="ruleForm2"
              class="demo-ruleForm">


        <el-form-item label="奶桶编号">
          <el-select v-model="sentProcess.milkId" placeholder="请选择牛奶编号">
            <el-option
                    v-for="(item) in milkIds"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="销售点编号">
          <el-input v-model="sentProcess.saleId" placeholder="请输入发送到的销售点ID，如：S001"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSentMilk = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="postSentProcess()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as machiningAPI from '@/api/machining/';

export default {
  name: "Machining",
  data() {
    return {
      dialogAddBucket: false,
      dialogBuckerOperate: false,
      dialogSentMilk: false,
      loading: false,
      percentage: 0,
      confirmBucket: {
        buckerId: '',
        machiningId: 'M001',
        isConfirm: '',
      },
      bucketIds: [],
      bucketIds2: [],
      milkIds: [],
      bucketOperate: {
        bucketId: '',
        operation: '',
        consumptionOrOutput: '',
      },
      sentProcess: {
        milkId: '',
        saleId: '',
      },
    };
  },
  methods: {
    getBucket() {
      machiningAPI.getBucket("M001").then((res) => {
        this.bucketIds = res.data
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddBucket = false
      })
    },
    addBucket() {
      this.loading = true
      machiningAPI.postConfirmBucket(this.confirmBucket).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '接收失败',
            message: res.msg,
          })
          this.dialogAddBucket = false
        } else {
          this.$notify({
            title: '接收成功',
            message: res.data.id,
            type: 'success'
          })
          this.dialogAddBucket = false
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddBucket = false
      })
    },
    getBuckes() {
      machiningAPI.get("M001").then((res) => {
        this.bucketIds2 = res.M001.bucketIds
        this.milkIds = res.M001.milkIds
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogBuckerOperate = false
      })
    },
    addBucketOperate() {
      this.loading = true
      if (this.bucketOperate.operation !== 1) {
        machiningAPI.postAddBucketOperate(this.bucketOperate).then((res) =>{
          if (res.status > 0) {
            this.$notify.error({
              title: '操作失败',
              message: res.msg,
            })
            this.dialogBuckerOperate = false
          } else {
            this.$notify({
              title: '消毒成功',
              message: '消毒信息：' + res.data.consumptionOrOutput,
              type: 'success'
            })
            this.dialogBuckerOperate = false
          }
          this.loading = false
        }).catch((error) => {
          this.$notify.error({
            title: '网路错误，或者服务器宕机',
            message: error,
          })
          this.dialogBuckerOperate = false
        })
      } else {
        machiningAPI.postAddBucketPack(this.bucketOperate).then((res) =>{
          if (res.status > 0) {
            this.$notify.error({
              title: '灌装失败',
              message: res.msg,
            })
            this.dialogBuckerOperate = false
          } else {
            this.$notify({
              title: '牛奶ID',
              message: res.data.id,
              type: 'success'
            })
            this.dialogBuckerOperate = false
          }
          this.loading = false
        }).catch((error) => {
          this.$notify.error({
            title: '网路错误，或者服务器宕机',
            message: error,
          })
          this.dialogBuckerOperate = false
        })
      }
    },
    postSentProcess() {
      this.loading = true
      machiningAPI.postSentProcess(this.sentProcess).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '发送失败',
            message: res.msg,
          })
          this.dialogSentMilk = false
        } else {
          this.$notify({
            title: '发送成功',
            message: res.msg,
            type: 'success'
          })
          this.dialogSentMilk = false
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogSentMilk = false
      })
    },
  },
  components: {
  },
};
</script>

<style scoped>

  .machining {
    margin-top: 20%;
  }

  /deep/ .el-button {
    font-size: 30px;
  }
</style>
